<template>
	<view>
		<view class="page">
			<l-painter ref="painter">
				<u-button type="primary" text="保存到相册" :customStyle="{width:'300rpx',marginTop:'10px'}"
				@click="saveCard"
				></u-button>
				
				 <l-painter-image
					:src="bgimg"
					css="width: 690rpx; object-fit: contain; object-position: 50% 50%; "
				  />
				   <l-painter-view 
				   css="position:absolute;top:70rpx;left:95rpx;display:flex;align-items:center;">
					  <l-painter-image 
						:src="zuzhiDefault"
						css="width: 220px; object-position: 50% 50%; "
					   />
					
				   </l-painter-view>
				   <l-painter-view css="position:absolute;top:290rpx;left:95rpx;">
					   <l-painter-view>
						  <l-painter-image
							:src="userInfoData.avatar?userInfoData.avatar:userInfoData.avatar=='https://wulumuqi27.zos.ctyun.cn/common/avatar.png'?myDefalut:myDefalut"
							css="width: 205rpx; object-fit: cover; object-position: 50% 50%;border-radius:11px; "
						   />
						   <l-painter-image
						   		:src="vipIcon"
						   		css="width: 25px; object-fit: cover; object-position: 50% 50%;position:absolute;bottom:-12px;right:-12px "
						    />
						</l-painter-view>
					   <l-painter-text css="font-size:36rpx;display:block;margin:15px 0 5px 0;"
							:text="userInfoData.trueName?userInfoData.trueName:userInfoData.nickName"
						/>
						<l-painter-text css="font-size:24rpx;color:#adaeb2"
							:text="leibie"
						/>
				   </l-painter-view>
				   <l-painter-view css="position:absolute;top:650rpx;left:95rpx;">
				   					   <l-painter-image
				   					   		:src="zuoyouming[$u.random(0, zuoyouming.length-1)].data"
				   					   		css="width:446rpx "
				   					    />
				   						
				   </l-painter-view>
				   
				   <l-painter-text css="font-size:22rpx;color:#adaeb2;position:absolute;left:95rpx;bottom:190rpx;"
				   	text="快来扫码\n加入我们吧！"
				    />
				 <!--  <l-painter-qrcode css="position:absolute;right:95rpx;bottom:100rpx;width: 150rpx; height: 150rpx"
				     text="www.baidu.com"
				    
				   />	 -->
				   <l-painter-image
				   		:src="wxewm"
				   		css="position:absolute;right:95rpx;bottom:180rpx;width: 120rpx; height: 120rpx "
				    />
			</l-painter>
		</view>
		
	</view>
</template>

<script>
	import {mapActions,mapState} from 'vuex'
	export default {
		data() {
			return {
				bgimg:require('@/static/images/grzx/myCardBg.jpg'),
				zuzhiDefault:require('@/static/index/logo.png'),
				myDefalut:require('@/static/images/userInfo/my-default.png'),
				vipIcon:require('@/static/images/userInfo/vip.png'),
				wxewm:require('@/static/images/userInfo/wx.png'),
				leibie:'',
				
				zuoyouming:[
					{data:require('@/static/images/grzx/myCard1.png')},
					{data:require('@/static/images/grzx/myCard2.png')},
					{data:require('@/static/images/grzx/myCard3.png')},
				],
				userInfoData:[]
			};
		},
		onLoad() {


			
				this.getwxUserAction({success:res=>{
					this.userInfoData=res.data.data
					let applyCar=this.userInfoData.userAuth.applyCar
					let applyMotorbike=this.userInfoData.userAuth.applyMotorbike
					let applyLandform=this.userInfoData.userAuth.applyLandform
					let car=!uni.$u.test.isEmpty(applyCar)?'汽车类 ':''
					let Motorbike=!uni.$u.test.isEmpty(applyMotorbike)?'摩托车类 ':''
					let Landform=!uni.$u.test.isEmpty(applyLandform)?'地形类 ':''
					this.leibie=car+Motorbike+Landform
					console.log(this.userInfoData.avatar)
				}})
				
				
		},
		methods:{
			...mapActions('m_login',['getwxUserAction']),
			saveCard(){
				this.imgsuccess()
			},
			imgsuccess(){
				this.$refs.painter.canvasToTempFilePathSync({
				  fileType: "jpg",
				  // 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
				  pathType: 'url',
				  quality: 1,
				  success: (res) => {
				    console.log(res.tempFilePath);
				    // 非H5 保存到相册
				    // H5 提示用户长按图另存
				    uni.saveImageToPhotosAlbum({
				        filePath: res.tempFilePath,
				        success: function () {
				            console.log('save success');
				        }
				    });
				  },
				});
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.page{width:100%;background:rgb(242,245,250);overflow: hidden;box-sizing: border-box;padding: 30rpx;}
</style>
